<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

  <head>

  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	<meta http-equiv="x-ua-compatible" content="ie=edge">

  	<title>宠物</title>
  	<link rel="shortcut icon" href="/assets/images/favourite_icon.svg">

  	<!-- fraimwork - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">

    <!-- icon font - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/fontawesome.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/stroke-gap-icons.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/icofont.css">

    <!-- animation - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/animate.css">

    <!-- carousel - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/slick.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/slick-theme.css">

    <!-- popup - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/magnific-popup.css">

    <!-- jquery-ui - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/jquery-ui.css">

    <!-- select option - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/nice-select.css">

    <!-- custom - css include -->
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
<style>
  #res img {
    /* 在这里添加你的样式 */
    display: block;
    margin: 0 auto;
    width: 700px;
  }
  #eventDescription {
    text-align: justify; /* 文本两端对齐 */
    font-family: Arial, sans-serif; /* 设置字体 */
    font-size: 18px; /* 设置字体大小 */
    line-height: 1.6; /* 设置行高 */
    color: #333; /* 设置文字颜色 */
  }
</style>
  </head>


  <body>

    <!-- body_wrap - start -->
    <div class="body_wrap">

      <!-- backtotop - start -->
      <div class="backtotop">
        <a href="#" class="scroll">
          <i class="far fa-arrow-up"></i>
        </a>
      </div>
      <!-- backtotop - end -->

      <!-- preloader - start -->
      <div id="preloader"></div>
      <!-- preloader - end -->

      <!-- header_section - start
      ================================================== -->
      <div th:replace="~{pet/common::common_header}"></div>
      <!-- header_section - end
      ================================================== -->

      <!-- main body - start
      ================================================== -->
      <main>

        <!-- sidebar cart - start
        ================================================== -->
        <div class="sidebar-menu-wrapper">
          <div class="cart_sidebar">
            <button type="button" class="close_btn"><i class="fal fa-times"></i></button>

            <ul class="cart_items_list ul_li_block mb_30 clearfix">
              <li>
                <div class="item_image">
                  <img src="/assets/images/cart_img_1.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
              <li>
                <div class="item_image">
                  <img src="/assets/images/cart_img_2.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
              <li>
                <div class="item_image">
                  <img src="/assets/images/cart_img_1.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
            </ul>

            <ul class="total_price ul_li_block mb_30 clearfix">
              <li>
                <span>Subtotal:</span>
                <span>$90</span>
              </li>
              <li>
                <span>Vat 5%:</span>
                <span>$4.5</span>
              </li>
              <li>
                <span>Discount 20%:</span>
                <span>- $18.9</span>
              </li>
              <li>
                <span>Total:</span>
                <span>$75.6</span>
              </li>
            </ul>

            <ul class="btns_group ul_li_block clearfix">
              <li><a class="btn btn_primary" href="cart.html">View Cart</a></li>
              <li><a class="btn btn_secondary" href="res.html">Checkout</a></li>
            </ul>
          </div>

          <div class="cart_overlay"></div>
        </div>
        <!-- sidebar cart - end
        ================================================== -->

        <!-- breadcrumb_section - start
        ================================================== -->
        <div class="breadcrumb_section">
          <div class="container">
            <ul class="breadcrumb_nav ul_li">
              <li><a href="index.html">Home</a></li>
              <li>Blog Details</li>
            </ul>
          </div>
        </div>
        <!-- breadcrumb_section - end
        ================================================== -->

        <!-- blog_details - start
        ================================================== -->
        <section class="blog_details section_space">
          <div class="container">
            <div class="row justify-content-center">
              <div class="col col-lg-12">
                <div class="details_image">
                  <div id="petid" style="display: none" th:value="${pet.getId()}"></div>
                  <img src="/assets/images/blog_details_img_1.webp" th:src="${pet.getImg()}" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <ul class="post_meta ul_li">
                  <li>[[${#dates.format(pet.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}]]</li>
<!--                  <li><a href="#!">admin</a></li>-->
<!--                  <li>-->
<!--                    <ul class="category_list ul_li">-->
<!--                      <li><a href="#!">Company</a></li>-->
<!--                      <li><a href="#!">Travel</a></li>-->
<!--                    </ul>-->
<!--                  </li>-->
                </ul>
                <h2 class="details_item_title">
                  [[${pet.getTitle()}]]
                </h2>
                <div id="res" th:utext="${pet.getDes()}"></div>

                <div class="comment_form_area" style="margin-top: 100px">
                  <h3 class="area_title">填写领养信息立即领养吧</h3>
                  <form action="javacript:;">
                    <div class="border_wrap">
                      <div class="form_wrap">
<!--                        <p class="mb-4">-->
<!--                          Make sure you enter the (*) required information where indicated.-->
<!--                        </p>-->
                        <div class="row">
                          <div class="col col-md-6">
                            <div class="form_item">
                              <h4 class="input_title">姓名</h4>
                              <input type="text" name="name">
                            </div>
                          </div>
                          <div class="col col-md-6">
                            <div class="form_item">
                              <h4 class="input_title">联系方式</h4>
                              <input type="email" name="email">
                            </div>
                          </div>
                        </div>

<!--                        <div class="form_item">-->
<!--                          <h4 class="input_title">Website URL</h4>-->
<!--                          <input type="text" name="website">-->
<!--                        </div>-->

                        <div class="form_item">
                          <h4 class="input_title">备注信息</h4>
                          <textarea name="comment"></textarea>
                        </div>
                      </div>
                      <div class="btn_wrap">
                        <button type="submit" class="btn btn_primary">立即领养</button>
                      </div>
                    </div>
                  </form>
                </div>




              </div>

            </div>
          </div>
        </section>
        <!-- blog_details - end
        ================================================== -->

        <!-- newsletter_section - start
        ================================================== -->
        <!-- newsletter_section - end
        ================================================== -->

      </main>
      <!-- main body - end
      ================================================== -->

      <!-- footer_section - start
      ================================================== -->
      <!-- footer_section - end
      ================================================== -->

    </div>
    <!-- body_wrap - end -->

    <!-- fraimwork - jquery include -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/popper.min.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/bootstrap5-dropdown-ml-hack.js"></script>

    <!-- carousel - jquery include -->
    <script src="/assets/js/slick.min.js"></script>

    <!-- popup - jquery include -->
    <script src="/assets/js/magnific-popup.min.js"></script>

    <!-- jquery-ui - jquery include -->
    <script src="/assets/js/jquery-ui.js"></script>

    <!-- off canvas sidebar - jquery include -->
    <script src="/assets/js/mCustomScrollbar.js"></script>

    <!-- select option - jquery include -->
    <script src="/assets/js/nice-select.min.js"></script>

    <!-- countdown timer - jquery include -->
    <script src="/assets/js/countdown.js"></script>

    <!-- counter up - jquery include -->
    <script src="/assets/js/counterup.min.js"></script>
    <script src="/assets/js/waypoints.min.js"></script>

    <!-- custom - jquery include -->
    <script src="/assets/js/main.js"></script>
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>

    <script>
      $(document).ready(function() {
        // 给按钮绑定点击事件
        $('.btn_primary').click(function(event) {
          // 阻止按钮默认的提交行为
          event.preventDefault();

          // 调用提交表单的函数
          submitForm();
        });

        // 定义提交表单的函数
        function submitForm() {
          var petId = document.getElementById('petid').getAttribute('value');

          // 获取表单元素
          var form = $('.comment_form_area form');

          // 序列化表单数据
          var formData = form.serialize();
          formData += '&' + encodeURIComponent('petId') + '=' + encodeURIComponent(petId);

          // 发起 AJAX 请求
          $.ajax({
            url: '/pet/res',
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded;charset=UTF-8', // 设置内容类型
            data: formData,
            success: function(response) {
              // 请求成功，可以在这里处理返回的数据
              console.log(response);
              layui.use(function () {
                var layer = layui.layer;
                layer.alert("领养申请提交成功😊！！！")
              })
            },
            error: function(xhr, status, error) {
              // 请求失败，处理错误
              console.error('请求失败:', status, error);
            }
          });
        }
      });

    </script>
  </body>
</html>